<template>
    <el-dialog
            title="帮助"
            v-model="dialogVisible"
            width="70%"
            customClass="flowHelp"
    >
        <el-tabs tab-position="left">
            <el-tab-pane label="如何新增">
                <el-divider content-position="left">如何新增</el-divider>
                <div>按住鼠标拖拽左侧组件到中间画布中松开鼠标即可</div>
            </el-tab-pane>
            <el-tab-pane label="如何删除">
                <el-divider content-position="left">页面删除</el-divider>
                <div>
                    鼠标右击需要删除的节点，点击删除
                </div>
            </el-tab-pane>
            <el-tab-pane label="如何移动">
                <el-divider content-position="left">如何移动</el-divider>
                <div>鼠标移动到节点中，当鼠标变为可拖拽的图标时按下鼠标移动到新的位置松开鼠标</div>
            </el-tab-pane>
            <el-tab-pane label="如何连线">
                <el-divider content-position="left">如何连线</el-divider>
                <div>鼠标移动到节点中左侧的图标上，当鼠标变为+时按下鼠标移动到另一个节点中松开鼠标</div>
            </el-tab-pane>
            <el-tab-pane label="如何添加条件">
                <el-divider content-position="left">如何添加条件</el-divider>
                <div>点击画布中的连线，在页面右侧会出现一个表单，输入新的条件，点击【保存】按钮</div>
            </el-tab-pane>
            <el-tab-pane label="如何保存">
                <el-divider content-position="left">保存单个节点或连线</el-divider>
                <div>鼠标点击节点或连线后,修改右侧表单信息,修改完成后点击【保存】按钮</div>
                <el-divider content-position="left">保存整个流程配置信息</el-divider>
                <div>鼠标点击节点或连线并点击【保存】按钮后,流程不会生效,在刷新页面后配置消失,只有在点击右上角【保存】按钮后,才能保存成功</div>
            </el-tab-pane>
            <el-tab-pane label="如何配置节点">
                <el-divider content-position="left">如何配置节点类型</el-divider>
                <div>鼠标点击节点后,修改右侧表单中的业务类型,可以选择组织机构、人员、角色、自定义</div>
                <el-divider content-position="left">节点类型介绍</el-divider>
                <div>组织机构: 配置组织机构后,该组织机构的所有人都会作为节点关联人员</div>
                <div>人员: 配置人员后,该人员会作为节点关联人员</div>
                <div>角色: 配置角色后,将会关联流程实例中的机构对应的该角色</div>
                <div>自定义: 接口的返回数据作为节点关联人员</div>
            </el-tab-pane>
        </el-tabs>
    </el-dialog>
</template>

<script>
    export default {
        data() {
            return {
                dialogVisible: false
            }
        },
        components: {},
        methods: {
            init() {
                this.dialogVisible = true
            }
        }
    }
</script>

<style>
    .flowHelp {
        height: 80%;
    }
</style>
